<template>
  <el-container>
    <el-header height="35px">
      <el-button class="position-relative">
        <router-link class="stretched-link" active-class="cheng-1" :to="{ name: '题目', params: { ID } }">{{ question.name
        }}</router-link>
      </el-button>
      <el-button class="position-relative">
        <router-link class="stretched-link" active-class="cheng-1" :to="{ name: '测试点' }">测试点</router-link>
      </el-button>
      <el-button class="position-relative">
        <router-link class="stretched-link" active-class="cheng-1" :to="{ name: '题解' }">题解</router-link>
      </el-button>
    </el-header>
    <router-view v-bind="{ ID, question, start }"></router-view>
    <el-main v-show="$route.name === '题目'">
      <div>
        source:{{ question.source }} dataform:{{ question.dataform }}
      </div>
      <contextlist v-bind="{ question }"></contextlist>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { asyncgetquestion } from '../../../api';
import contextlist from '../../../components/watchquestion/contextlist.vue'
import { markdownhtml } from '../../../util/htmlstring';
const prop = defineProps<{ ID: number }>()

const question = ref<Studycodemodel.Iquestion>({})

watch(() => prop.ID, () => {
  start()
})

onMounted(async () => {
  start()
})

async function start() {
  const e = await asyncgetquestion({ ID: prop.ID })
  const data = markdownhtml(e) as Studycodemodel.Iquestion
  question.value = Object.assign(question, data);
  return question
}

</script>
<style scoped>
.cheng-1 {
  color: var(--color-43);
}
</style>
